<template>
	<view class="me">
		<view class="me-top">
			<view class="me-top-bg"></view>
			<view class="me-top-info">
				<view class="me-top-info-base" style="display: flex;justify-content: space-between;align-items: center;" >
					<view style="display: flex;justify-content: space-between;">
						<view class="me-top-info-base-img" >{{firstName}}</view>
						<view class="me-top-info-base-name">
							<text>{{info.name}}</text>
							<view class="me-top-info-base-name-info">
								<view class="me-top-info-base-name-info-base">
									{{info.role}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="me-list">
			<u-cell-group>
				<u-cell-item size="large" title="我的患者" :isLink="true" arrow-direction="right"></u-cell-item>
				<u-cell-item size="large"  title="我的收藏" :isLink="true" arrow-direction="right"></u-cell-item>
				<u-cell-item size="large"  title="工作统计" :isLink="true" arrow-direction="right"></u-cell-item>
			</u-cell-group>
		</view> -->
		<view class="me-btn">
			<button @tap="loginOut">退出登录</button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				info:{
					avatar:"",
					name:uni.getStorageSync("userName"),
					role:uni.getStorageSync("roleName"),
				},
				firstName:uni.getStorageSync("userName").substring(0,1)
			}
		},
		methods:{
			loginOut(){
				uni.removeStorageSync("role")
				uni.removeStorageSync("roleName")
				uni.removeStorageSync("userName")
				this.$u.route({
					url: '/pages/welcome/login',
					type: 'reLaunch'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #F5F7FB;
	}
	.me{
		&-top{
			position: relative;
			&-bg{
				width: 750rpx;
				height: 387rpx;
				background: #49B9AD;
			}
			&-info{
				position: absolute;
				top: 280rpx;
				height: 310rpx;
				margin:0 24rpx;
				width: 702rpx;
				&-base{
					background-color: #fff;
					height: 180rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					padding:30rpx;
					display: flex;
					align-items: center;
					&-img{
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						text-align: center;
						line-height: 120rpx;
						font-weight: 600;
						font-size: 48rpx;
						background-color: #ccc;
					}
					&-name{
						margin-left: 30rpx;
						display: flex;
						justify-content: center;
						flex-direction: column;
						align-items: flex-start;
						text{
							font-size: 32rpx;
						}
						&-info{
							display: flex;
							margin-top: 10rpx;
							align-items: center;
							&-base{
								height: 30rpx;
								border-radius: 15rpx 15rpx 15rpx 15rpx;
								font-size: 24rpx;
								position: relative;
							}
						}
					}
				}
			}
		}
		&-list{
			margin-top: 280rpx;
			padding: 10rpx 30rpx;
		}
		&-btn{
			padding: 20rpx 24rpx;
			margin-top: 100rpx;
			button{
				background: #fff;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				// color:#fff
			}
		}
	}
</style>